<template>
  <div class="top_bar">
    <div class="logo"><img src="https://bu.dusays.com/2024/09/28/66f7782a0e175.png" alt=""></div>
    <div class="search">
      <el-autocomplete popper-class="my-autocomplete" v-model="searchQuery" :fetch-suggestions="querySearch"
        placeholder="请输入商品名称" @select="handleSelect" size="large">
        <template #suffix>
          <i class="el-icon-search el-input__icon" @click="handleIconClick"></i>
        </template>
        <template #default="{ item }">
          <div class="name">{{ item.itemName }}</div>
        </template>
      </el-autocomplete>
      <div class="search_btn">
        <v-btn class="search_btn_v" :ripple="false" height="4vh" min-width="12vh">
          <v-avatar size="30" image="https://bu.dusays.com/2024/10/31/67231ef608442.png"></v-avatar>
        </v-btn>
      </div>
    </div>
  </div>
  <div class="select_bar">
    <v-btn href="/user" class="select_btn" style="color: black;" variant="text">
      <h4 style="font-size: 2vh;">首页</h4>
    </v-btn>
    <v-btn href="/retail" class="select_btn" variant="plain">
      <h4 style="font-size: 2vh;">种农圈</h4>
    </v-btn>
    <v-btn href="/fruitCentre" class="select_btn" variant="plain">
      <h4 style="font-size: 2vh;">果蔬中心</h4>
    </v-btn>
    <v-btn href="/qr/404" class="select_btn" variant="plain">
      <h4 style="font-size: 2vh;">果蔬溯源</h4>
    </v-btn>
    <v-btn href="/ziziSeek" class="select_btn" variant="plain">
      <h4 style="font-size: 2vh;">ZiziSeek</h4>
    </v-btn>
    <v-btn href="/ziziNews" class="select_btn" variant="plain">
      <h4 style="font-size: 2vh;">吱吱快讯</h4>
    </v-btn>
  </div>
</template>

<script setup>
import { Calendar, Search } from '@element-plus/icons-vue'
import { onMounted, reactive } from "vue";
import { ref } from 'vue'
import request from '../utils/request.js'
import router from '../router/index.js'

const search_input = ref('')

//搜索
const searchQuery = ref('');  // 用于绑定搜索框的值
const SearchItems=ref([]);

// 加载所有商品数据
const loadSearchItems = () => {
  request.get('/api/item/selectItemAll').then(res => {
    SearchItems.value = res.data;
    console.log('searchitems:', SearchItems.value);
  });
};

// 搜索函数：根据输入的内容过滤商品
const querySearch = (queryString, cb) => {
  const results = queryString
      ? SearchItems.value.filter(item =>
          item.itemName.toLowerCase().includes(queryString.toLowerCase())
      )
      : [];
  cb(results);
};

// 选择某个商品时的处理
const handleSelect = (item) => {
  console.log('选中的商品:', item.itemID);
  jumpDetail(item.itemID);
};

// 处理点击图标事件
const handleIconClick = () => {
  console.log('搜索图标点击');
};

const jumpDetail = (itemId) => {
  router.push(`/desc/${itemId}`).then(() => {
    window.scrollTo(0, 0);
  });
};

onMounted(() => {
  loadSearchItems();
})
</script>

<style scoped>
.top_bar {
  width: 100%;
  height: 10vh;
  /* background-color: wheat; */
  display: flex;
}

.top_bar img {
  width: 20vh;
  height: auto;
  margin-left: 15vh;
}

.top_bar .search {
  width: 100vh;
  margin: auto;
  margin-left: 10vh;
  display: flex;
}


.search_btn {
  display: flex;
}

.search .search_btn .search_btn_v {
  margin-left: 2vh;
  background-color: green;
  font-size: 2vh;
  font-weight: bold;
  border-radius: 20px;
}


/* 导航栏 */
.select_bar {
  width: 100%;
  height: 5vh;
  display: flex;
}

.select_btn {
  margin: auto;
  font-weight: bold;
  font-size: 18px;
}

</style>